<template>
	<div
		class="min-h-[280px] bg-gradient-1 px-[35px] pt-[70px] pb-4 text-white rounded-t overflow-hidden">
		<template v-if="userInfo">
			<div class="flex">
				<!--<account-avatar :data="userInfo?.avatar" :width="60" @click="onAvatar" :toProfile="false" />-->
				<!--<div class="ml-4 flex-1">-->
				<!--	<div class="flex items-center text-lg">-->
				<!--		&lt;!&ndash;<base-image class="mr-1" :src="`region/${userInfo?.location}.svg`" />&ndash;&gt;-->
				<!--		<div class="mr-3">{{ userInfo?.nickName || userInfo?.userName }}</div>-->
				<!--		<base-icon name="bianji" v-if="isMe" @click="onEdit" />-->
				<!--	</div>-->
				<!--	<div class="text-sm text-white-500">@{{ userInfo?.userName }}</div>-->
				<!--	<div class="flex items-center">-->
				<!--		<account-titles :vip="userInfo?.vip" :star="userInfo?.star" :medal="userInfo?.medal" />-->
				<!--		<account-tags-->
				<!--			v-if="userInfo?.userId"-->
				<!--			class="ml-1"-->
				<!--			:data="memberStore.userTags(userInfo?.userId)" />-->
				<!--	</div>-->
				<!--	<div class="flex justify-between items-center">-->
				<!--		<account-follow :data="userInfo" class="!text-white-500" />-->
				<!--		<div class="text-xs text-white-500">-->
				<!--			{{ $t('profile.registerTime') }}-->
				<!--			{{ fmtDate(userInfo?.createdAt) }}-->
				<!--		</div>-->
				<!--	</div>-->
				<!--</div>-->
				<AccountInfo :userInfo="userInfo" :clickAvatar="onAvatar" />
				<div class="ml-auto self-center">
					<base-icon v-if="isMe" class="app-text-react" name="bianji" size="24" @click="onEdit" />
					<base-button
						v-else
						:class="{ 'opacity-50': userInfo?.follow }"
						type="primary"
						:block="false"
						:disabled="followBtnDisabled"
						:loading="loading"
						@click="handleFollow">
						{{ $t(followBtnTextT) }}
					</base-button>
				</div>
			</div>
			<base-ellipsis
				class="mt-3 mb-2 text-sm text-t-3"
				:class="{ 'cursor-pointer': isMe }"
				:line-clamp="3"
				@click="onEdit"
				:text="signature" />
			<account-follow :userInfo="userInfo" />
		</template>
		<template v-else>
			<BaseLoadingCircle class="mt-10 mx-auto" />
		</template>
	</div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { AccountFollow, AccountInfo } from '@/components/account/'
import { BaseButton, BaseEllipsis, BaseIcon, BaseLoadingCircle } from '@/components/base'
import { useAccountStore, useProfileStore } from '@/store'
import { t } from '@/utils'
import { ViewType } from './types'
import { UserInfo } from '@/types'
import { getOtherUserInfo } from '@/api/user'
import { useFollow } from '@/hooks/'
import { FollowStatus } from '@/enums'

const profileStore = useProfileStore()
const accountStore = useAccountStore()
const userInfo = ref<UserInfo | null>(null)
const isMe = computed(() => profileStore.isMe(profileStore.profileShow?.userId))
const signature = computed(() => {
	if (userInfo.value && userInfo.value.signature) {
		return userInfo.value.signature
	} else if (isMe.value) {
		return t('profile.signaturePlaceholder')
	} else {
		return t('profile.signaturePlaceholder2')
	}
})
const followBtnDisabled = computed(
	() => userInfo.value?.followStatus === FollowStatus.RequestedByMe
)
const followBtnTextT = computed(() => {
	switch (userInfo.value?.followStatus) {
		case FollowStatus.RequestedByMe:
			return 'follow.followRequest'
		case FollowStatus.FollowedByMe:
			return 'follow.unfollow'
		default:
			return 'follow.follow'
	}
})

const { loading, followRequest, followCancel } = useFollow()
const viewChange = (val: ViewType) => profileStore.showProfileType(val)
const onEdit = () => isMe.value && viewChange(ViewType.edit)
const onAvatar = () => isMe.value && viewChange(ViewType.avatar)
const handleFollow = async () => {
	if (!accountStore.isLogin) {
		accountStore.showLogin()
		return
	}
	if (!userInfo.value) {
		return
	}
	console.log(userInfo.value.followStatus, FollowStatus.FollowedByMe)
	if (userInfo.value.followStatus === FollowStatus.FollowedByMe) {
		await followCancel(userInfo.value)
	} else {
		await followRequest(userInfo.value)
	}
}
const getUserData = async () => {
	if (profileStore.profileShow?.userId) {
		const { data } = await getOtherUserInfo({
			userId: profileStore.profileShow?.userId
		})
		data && (userInfo.value = data)
	}
}

watch(
	[() => profileStore.profileShow?.userId, () => profileStore.userInfo],
	([userId, _userInfo]) => {
		if (!isMe.value && userId) {
			getUserData()
		} else {
			userInfo.value = _userInfo
		}
	},
	{ immediate: true }
)
</script>
